<template>
  <el-menu default-active="1" class="el-menu-vertical-demo" :collapse="isCollapse" @open="handleOpen"
    @close="handleClose">
    <!-- <el-menu-item index="1">
      https://router.vuejs.org/zh/guide/migration/#%E5%88%A0%E9%99%A4-router-link-%E4%B8%AD%E7%9A%84-event-%E5%92%8C-tag-%E5%B1%9E%E6%80%A7
      <router-link to="/" custom v-slot="{ navigate }">
        <span @click="navigate" @keypress.enter="navigate" role="link">Go to Home</span>
      </router-link>
    </el-menu-item> -->

    <div v-for="aside in asides">

      <el-sub-menu v-if="aside.subAsides" :index="aside.id">

        <template #title>
          <el-icon>
            <Setting />
          </el-icon>
          <span>Go {{ aside.name }}</span>
        </template>

        <el-menu-item v-for="sub in aside.subAsides" :index="sub.id">
          <el-icon>
            <Setting />
          </el-icon>
          <router-link :to="sub.path" custom v-slot="{ navigate }">
            <span @click="navigate" @keypress.enter="navigate" role="link">Go {{ sub.name }}</span>
          </router-link>

          <!-- 如果还有需要封装组件循环遍历,目前达到两级就够用了 -->
        </el-menu-item>


      </el-sub-menu>

      <el-menu-item v-else :index="aside.id">
        <el-icon>
          <Setting />
        </el-icon>
        <router-link :to="aside.path" custom v-slot="{ navigate }">
          <span @click="navigate" @keypress.enter="navigate" role="link">Go {{ aside.name }}</span>
        </router-link>
      </el-menu-item>

    </div>
    <el-menu-item @click="cc">
      <el-icon>
        <!-- 收缩 -->
        <Fold v-if="!isCollapse" />
        <!-- 展开 -->
        <Expand v-if="isCollapse" />
      </el-icon>
    </el-menu-item>
  </el-menu>
</template>

<script >

export default {
  props: ['asides'],
  data() {
    return {
      isCollapse: false
    }
  },
  methods: {
    cc() {
      this.isCollapse = !this.isCollapse;
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath)
    }

  }
}

</script>